import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import { Popup } from 'semantic-ui-react'

class ImageListButton extends React.Component {
  state = { hover: false }

  handleMouseInter = () => this.setState({ hover: true })

  handleMouseLeave = () => this.setState({ hover: false })

  render() {
    const { hover } = this.state
    const {
      children, img, action, title,
    } = this.props
    const classString = hover === false ? '' : 'label-glrBtnHover'
    return (
      <Popup
        trigger={(
          <div
            className={classString}
            onMouseEnter={() => this.handleMouseInter()}
            onMouseLeave={() => this.handleMouseLeave()}
            onClick={action}
          >
            <img src={img} />
          </div>
)}
        content={title}
        inverted
      />
    )
  }
}

class ImageListView extends React.Component {
  componentWillMount() {}

  render() {
    const { actionChangePageInfoState } = this.props
    return (
      <div className="label-glrButtons">
        <ImageListButton
          img="https://png.icons8.com/dusk/2x/select-all.png"
          action={() => actionChangePageInfoState('all')}
          title="所有"
        />
        <ImageListButton
          img="https://png.icons8.com/office/2x/work.png"
          action={() => actionChangePageInfoState('label')}
          title="未完成"
        />
        <ImageListButton
          img="https://png.icons8.com/doodle/2x/checkmark.png"
          action={() => actionChangePageInfoState('done')}
          title="已完成"
        />
        <ImageListButton
          img="https://png.icons8.com/color/2x/close-window.png"
          action={() => actionChangePageInfoState('reopen')}
          title="出错"
        />
      </div>
    )
  }
}

const mapDispatchToProps = {
  actionChangePageInfoState: projectDuck.creators.actionChangePageInfoState,
}

export default connect(
  null,
  mapDispatchToProps,
)(ImageListView)
